<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/index.min.js"></script>
  <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/theme-chalk/index.min.css" rel="stylesheet">
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>
</head>
<body>
  <div id="app">
    <el-card>
      <el-form :inline="true">
        <el-form-item label="标签名称">
          <el-input v-model="form.tags"></el-input>
        </el-form-item>
        <el-form-item label="企业简称">
          <el-input v-model="form.shortName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="onClear">清除</el-button>
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- v-model="state" -->
      <el-tabs type="card" :value="state+''" @input="state = parseInt($event)" @tab- click="onTabClick">
        <el-tab-pane label="启用" name="1">
        </el-tab-pane>
        <el-tab-pane label="禁用" name="0">
        </el-tab-pane>
      </el-tabs>
      <el-table
      border
      :data="list"
      style="width: 100%">
      <el-table-column
        type="index"
        width="50"
        label="序号">
      </el-table-column>
      <el-table-column
        label="企业全称" prop="company">
      </el-table-column>
      <el-table-column
        label="企业简称" prop="shortName">
      </el-table-column>
      <el-table-column
        label="标签" prop="tags">
      </el-table-column>
      <el-table-column
        label="状态">
        <template v-slot="{row}">{{row.state===1?'启用':'禁用'}}</template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end">
      <el-pagination
        :current-page="page.page"
        :page-size="page.pagesize"
        :total="page.total"
        layout="prev, pager, next"
        @current-change="onCurrentChange"
      >
      </el-pagination>
    </el-row>
    </el-card>
  </div>
</body>
<script>
//MVVM框架
//model数据,vue当中data
//view模块,vue当中指令
//view-model,vue框架
//开发经验
//(1)首先设计数据,第一位的事情
//  其他步骤随便
//(2)能少定义数据就少定义,少定义方法就少定义
if(!localStorage.token) location.href = './login.html'
const request = axios.create({
  baseURL: 'http://hmmm-api.itheima.net/'
})
function getList(params){
  return request({
    url: '/companys',
    method: 'get',
    params,
    headers: {
      Authorization: localStorage.token
    }
  })
}
new Vue({
  el: '#app',
  data(){
    return {
      //搜索表单
      form: {
        tags: undefined,
        shortName: undefined
      },
      //标签切换
      state: 1,
      //分页信息
      page: {
        page: 1,
        pagesize: 5,
        total: 0
      },
      //列表数据
      list: []
    }
  },
  created(){
    this.getList()
  },
  methods: {
    async getList(){
      let {data: {counts, items}} = await getList({
        ...this.form,
        state: this.state,
        ...this.page
      })
      this.page.total = counts
      this.list = items
    },
    onClear(){
      this.form = {
        tags: undefined,
        shortName: undefined
      }
      this.onSearch()
    },
    onSearch(){
      //重点
      this.page.page = 1
      this.getList()
    },
    onTabClick(){
      this.onSearch()
    },
    onCurrentChange(val){
      this.page.page = val
      this.getList()
    }
  },
})
</script>
</html>
